<template>
    <div>
        <div id="map-container"  style="width:100%; height: 100vh">
            <div class="map-header">
                <img src="../../../assets/images/BI/BI-TopBg.png" alt="">
                <span class="map-title-left">{{ info.text }}</span>
                <div class="map-header-title">
                    <img src="@/assets/images/BI/BI-TitleBoth.png" alt="">
                    <span>{{ info.name }}</span>
                    <img src="@/assets/images/BI/BI-TitleBoth.png" alt="">
                </div>
                <img class="map-title-right" :src="info.logo" alt=""></img>
            </div>
            <div class="between">
                <div class="map-left">
                    <div class="kind-box">
                        <el-radio-group v-model="template" size="small" class="bg_radio" @change="searchQuery">
                            <!-- <el-radio-button></el-radio-button> -->
                            <el-radio-button v-for="(item,index) in info.bi" :label="item.component" :key="index">{{ item.name }}</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="left-box">
                        <!-- <img src="../../../assets/images/BI/left-bg.png" alt=""> -->
                        <div class="component">
                            <div class="component-box">
                                <div class="component-title">
                                    <img src="../../../assets/images/BI/component.png" >
                                    <span class="component-title-text"> {{$t('confinedSpace.BI.gas')}}</span>
                                    <div class="component-title-ep">Gas concentration monitoring</div>
                                </div>
                                <components class="component-box-item" :dataSource="progressFrom" is="progressFrom"></components>
                            </div>
                            <div class="component-box noticeBox">
                                <div class="component-title">
                                    <img src="../../../assets/images/BI/component.png" >
                                    <span class="component-title-text"> {{$t('confinedSpace.BI.notice')}}</span>
                                    <div class="component-title-ep">warning Notice</div>
                                </div>
                                <components class="component-box-item" :dataSource="notice" is="notice"></components>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="map-right">
                    <!-- <img src="../../../assets/images/BI/right-bg.png" alt=""> -->
                    <div class="right-box">
                        <div class="component">
                            <div class="component-box">
                                <!-- <div class="component-title">
                                    <img src="../../../assets/images/BI/component.png" >
                                    <span class="component-title-text">历史数据趋势图</span>
                                    <div class="component-title-ep">Historical data trend chart</div>
                                </div> -->
                                <components class="component-box-item" :dataSource="weather" is="weather"></components>
                            </div>
                            <div class="component-box">
                                <div class="component-title">
                                    <img src="../../../assets/images/BI/component.png" >
                                    <span class="component-title-text"> {{$t('confinedSpace.BI.online')}}</span>
                                    <div class="component-title-ep">Device online status</div>
                                </div>
                                <components class="component-box-item" :dataSource="online" is="online"></components>
                            </div>
                            <!-- <div class="handle" @mousedown="dragEagle($event,4)">
                                <i class="iconfont ali-icon-drag"></i>
                            </div> -->
                            <div class="component-box">
                                <div class="component-title">
                                    <img src="../../../assets/images/BI/component.png" >
                                    <span class="component-title-text"> {{$t('confinedSpace.BI.trend')}}</span>
                                    <div class="component-title-ep">Historical data trend chart</div>
                                </div>
                                <components class="component-box-item" :dataSource="trend" is="trend"></components>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import notice from './modules/notice'
import trend from './modules/trend'
import progressFrom from './modules/progressFrom'
import online from './modules/online'
import weather from './modules/weather'
import { getAction } from '@/api/manage'
import reconnectingWebsocket from 'reconnecting-websocket';
import AMap from 'AMap' // 引入高德地图
export default {
    components: {
        trend,
        notice,
        weather,
        online,
        progressFrom,
    },
    data() {
        return {
            ws: void 0,
            machine:{},
            concentration:{},
            progressFrom:{
                CH4: {
                    percentage:0
                },
                H2S: {
                    percentage:0
                },
                CO: {
                    percentage:0
                },
                O2: {
                    percentage:0
                }
            },
            online:{},
            notice:[],
            weather:{},
            trend:{},
            info:{},
            map: null,
            marker: null,
            template:void 0,    // 模板
            components:'notice',
            load:null
        }
    },
    mounted() {
        this.load = this.loading()
        this.getData().then((map)=>{
            this.initMap(map)
        })
        this.getComponetData()
    },
    methods: {
        initMap(map) {
            this.map = new AMap.Map("map-container", {
                plugin: ["PolyEditor"],
                resizeEnable: true, //是否监控地图容器尺寸变化
                zoom: 16.8,
                center: map.center || [116.397428, 39.90923],
            });
            this.marker = new AMap.PolygonEditor(this.map);
        },
        getData(){
            return new Promise((resolve,reject)=>{
                getAction('/BI/admin/v1/confinedSpace/getData').then(res=>{
                    this.info=res.data
                    resolve(res.data.background)
                })
            })
        },
        getComponetData(){
            let param = {
                prjCode: sessionStorage.getItem('puuid'),
                requestId:this.generateRandom(),
                components: ['progressFrom','online','notice','weather','trend']
            }
            let url = process.env.VUE_APP_BASE_WSS + '/confinedSpace'
            this.ws = new reconnectingWebsocket(url)
            this.ws.onopen = () => {
                this.ws.send(JSON.stringify(param))
            }
            this.ws.onmessage = (event) => {
                const { code, data } = JSON.parse(event.data)
                if(code == 0){
                    this.trend = data.trend
                    this.notice = data.notice
                    this.weather = data.weather
                    this.online = data.online
                    this.progressFrom = Object.assign(this.progressFrom,data.progressFrom)
                }
                this.load.close()
            }
            this.ws.onerror=(event)=>{
                this.$confirm(this.$t('confinedSpace.global.alertError'), this.$t('confinedSpace.global.tips'), {
                    confirmButtonText: this.$t('confinedSpace.global.tipsConfirm'),
                    showCancelButton: false,
                }).then(() => {
                    this.load.close()
                }).catch(() => {
                    this.ws.close()
                })
            }
        },
        generateRandom() {
            const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            let result = '';
            for (let i = 0; i < 16; i++) {
                result += characters.charAt(Math.floor(Math.random() * characters.length));
            }
            return result;
        },
        searchQuery(){

        }
    }
}
</script>
<style lang="scss" scoped>
.map-header {
    width: 100%;
    // height: 73px;
    // background: url('../../../assets/images/BI/BI-TopBg.png') no-repeat;
    position: relative;
    padding-bottom: 12px;
    z-index: 9;
    background: rgba(255, 255, 255, 0.75);
    &>img{
        width: 100%;
        height: auto;
    }
    .map-title-left{
        position: absolute;
        left: 3.4vw;
        top: 3.2vw;
        font-size: 0.6vw;
        color: #888;
    }
    .map-title-right{
        position: absolute;
        right: 3.9vw;
        top: 2.1vw;
        width: 6.35vw;
        color: #888;
    }
    .map-header-title{
        position: absolute;
        top: 50%;
        left: 50%;
        background: url('../../../assets/images/BI/BI-TitleBg.png') no-repeat;
        transform: translate(-50%, -50%);
        background-size: cover;
        font-size: 1.6vw;
        color: #fff;
        width: 35.6%;
        height: 100%;
        line-height: 3.6vw;
        text-align: center;
        &>span{
            margin: 0 11px;
        }
    }
}
.handle {
  cursor: ns-resize;
  width: 100%;
  height: 1px;
  background: #ccc;
  margin: 5px 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.between {
    display: flex;
    justify-content: space-between;
    cursor: default;
    .map-left{
        width: 30%;
        max-width: 650px;
        height: 100%;
        position: relative;
        background: linear-gradient(90deg, rgb(255 255 255 / 70%), rgb(255 255 255 / 20%) 120%);
        z-index: 9;
        padding-left: 1.05vw;
        .kind-box{
            width: 95%;
            padding: 0.364vw 0.52vw 0.416vw;
            border: 1px solid #ADCCEE;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 5px;
            margin: 0.26vw 0 0.416vw;
            .bg_radio {
                display: flex;
                // justify-content: space-around;
                .el-radio-button--small {
                    // width: 90%;
                    width: 20%;
                    text-align: center;
                }
                :deep(.el-radio-button__inner) {
                    font-size: 0.73vw;
                    padding: 0.416vw;
                    border: none !important;
                    border-radius: 0;
                    background: transparent;
                    box-shadow: none;
                    color: #000;
                }
                .is-active {
                    background: #2162A4;
                    border-radius: 5px;
                    :deep(.el-radio-button__inner){
                        color: #fff;
                    }
                }
            }
        }
        .left-box{
            position: relative;
            background: url('../../../assets/images/BI/left-bg.png') no-repeat;
            width: 100%;
            height: calc(100vh - 6vw - 3.12vw);
            background-size: 110% 100%;
        }
    }
    
    .component{
        position: absolute;
        padding: 4% 10%;
        width: 96%;
        top: 0px;
        height: 100%;
        // left: 46%;
        // transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        .component-box{
            // flex: 1;
            margin-top: 1.8vh;
            // flex-basis: auto;
            .component-title{
                display: flex;
                align-items: center;
                margin-bottom: 1.8vh;
                .component-title-text{
                    font-size: 2.17vh;
                    font-weight: bold;
                    padding: 0 1.4vw 0 11px;
                }
                .component-title-ep{
                    flex: 1;
                    text-align: right;
                    border-bottom: 1px solid #CACACA;
                    color: #888;
                    font-size: 1.3vh;
                    line-height: 3.26vh;
                }
            }
            &.noticeBox{
                display: flex;
                flex-direction: column;
                height: 100%;
                .component-box-item{
                    flex-grow: 1;
                    height: 0;
                }
            }
        }
    }
    .map-right{
        width: 30%;
        max-width: 650px;
        height: 100%;
        position: relative;
        background: linear-gradient(270deg, rgb(255 255 255 / 70%), rgb(255 255 255 / 30%) 120%);
        z-index: 9;
        padding-right: 1.05vw;
        &>img{
            float: right;
            width: 92%;
        }
        .right-box{
            margin-top: 3%;
            position: relative;
            background: url('../../../assets/images/BI/right-bg.png') no-repeat;
            width: 100%;
            height: calc(100vh - 6vw);
            background-size: 110% 100%;
            background-position-x: 100%;
            .component{
                padding: 4% 8% 4% 10%;
                right: 0;
            }
        }
    }
}
</style>
